<!--
 * @Author: wjn
 * @Date: 2021-07-11 08:23:23
 * @LastEditTime: 2021-07-11 18:00:41
 * @LastEditors: wjn
 * @Description: 
 * @FilePath: \briup\day03\index.html
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行学天下-首页</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <div class="headLeft">
        <div class="logo">
          行学天下
        </div>
        <div class="title">
          行学天下
        </div>
      </div>
      <div class="headRight">
        <div class="callMe">
          <a href="#">
            <img src="image/callMe.png" alt="图片丢失了">
            致电我们
          </a>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="lunBoTu">
      <div class="lunBoTuImg">
        <ul>
          <li class="item" style="display: block;">
            <img src="image/picture1.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture2.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture3.jpg" alt="图片丢失">
          </li>
        </ul>
      </div>
      <div class="lnBtn">
        <div class="lastBtn">
          <img src="image/last.png" alt="图片丢失">
        </div>
        <div class="nextBtn">
          <img src="image/next.png" alt="图片丢失">
        </div>
      </div>
      <!--小圆点-->
      <div class="smallBtn">
        <ul>
          <li class="btn active"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
      </div>
    </div>
    <!--精选游学项目-->
    <div class="youXue">
      <div class="myH2">
          精选游学项目
      </div>
      <div class="myUl">
       <img src="image/img1.jpg" alt="图片丢失">
       <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
       <div class="date">2021-11-01 ~ 2020-11-10</div>
      | <div class="city">新西兰</div>
       <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
     </div>
      <div class="myUl">
       <img src="image/img1.jpg" alt="图片丢失">
       <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
       <div class="date">2021-11-01 ~ 2020-11-10</div>
      | <div class="city">新西兰</div>
       <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
   </div>
   <div class="myUl">
       <img src="image/img1.jpg" alt="图片丢失">
       <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
       <div class="date">2021-11-01 ~ 2020-11-10</div>
      | <div class="city">新西兰</div>
       <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
         在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
   </div>
  </div>
  
   <!--学生风采-->
   <div class="fengCai">
       <div class="myH2">
           学生风采
       </div>
       <div class="Feng">
       <div class="myFengCai">
           <img src="image/img2.jpg" alt="图片丢失">
           <div class="title">在菲律宾游学是一种什么样的体验</div>
           <div class="date">2021-11-20</div>
           <div class="name">wjn</div>
           <div class="like">⭐20</div>
       </div>

       <div class="myFengCai">
          <img src="image/img2.jpg" alt="图片丢失了">
          <div class="title">在菲律宾游学是一种什么样的体验</div>
          <div class="date">2021-11-20</div>
          <div class="name">wjn</div>
          <div class="like">⭐20</div>
      </div>

      <div class="myFengCai">
          <img src="image/img2.jpg" alt="图片丢失了">
          <div class="title">在菲律宾游学是一种什么样的体验</div>
          <div class="date">2021-11-20</div>
          <div class="name">wjn</div>
          <div class="like">⭐20</div>
      </div>

      <div class="myFengCai">
          <img src="image/img2.jpg" alt="图片丢失了">
          <div class="title">在菲律宾游学是一种什么样的体验</div>
          <div class="date">2021-11-20</div>
          <div class="name">wjn</div>
          <div class="like">⭐20</div>
      </div>
      
  </div>
   </div>
   
  
   <!--常见问题-->
   <div class="wenTi">
       <div class="myH2">
           常见问题
       </div>
       <div class="myWenTi">
           <div class="title">
              孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？
           </div>
           <div class="desc">
              其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。
              孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，
              学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，
              所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；
              而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。
              家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。
           </div>
           <img src="image/foot.png" alt="">
       </div>
   </div>
  </div>
</body>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
</script>
<script>
  var index = 0;
  var timer;
  // 通过定时器切换图片
  function myTimer() {
    timer = setInterval(
      function () {
        index++;
        if (index > 2) {
          index = 0
        }
        $('.item').eq(index).show().siblings().hide();
        // 改变小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
      }, 3000
    )
  }
  this.myTimer();
  var that = this;
  // 通过左右键切换图片
  $('.nextBtn').click(function () {
    index++;
    if (index > 2) {
      index = 0;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  $('.lastBtn').click(function () {
    index--;
    if (index < 0) {
      index = 2;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  // 点击小圆点切换图片
  $('.btn').click(function () {
    // 获取用户点击的列表元素下标
    index = $(this).index();
    // 切换图片
    $('.item').eq(index).show().siblings().hide();
    // 给小圆点添加样式
    $(this).addClass('active').siblings().removeClass('active')
    // 重置定时器
    clearInterval(timer);
    that.myTimer();
  })
</script>

</html>